<template>
	<view class="page-main">
		<pull-down-page ref="pullDownPage" height="100vh" :subsectionList="subsectionList"
			@pullDownRefresh="pullDownRefresh" @sectionChange="onSectionChange" @scrolltolower="onRewardList">
			<template slot="swiper-item-0">
				<u-empty mode="data" icon="/static/data.png" v-if="list.length==0" />
				<view class="card-list" v-for="(item, index) in list" :key="index">
					<view class="main">
						<u-row customStyle="position: relative;">
							<u-col span="3">
								<u--image :showLoading="true" :src="item.images" shape="circle" width="80px"
									height="80px" @click="onPopupImages(item.images)" />
							</u-col>
							<u-col span="7">
								<view>
									<view class="main-title">
										<u--text :text="item.rewrdContent" />
									</view>
									<view class="main-integral">
										<u--text type="info" :text="item.integral" prefixIcon="integral-fill"
											iconStyle="color:#ffaaff;margin-right: 3px;" />
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<u--text v-if="item.convertibleTimes>=0" :text="`剩${item.convertibleTimes}次`"
									type="info" align="center" />
								<u--text v-else text="∞" size="20" type="info" align="center" />
							</u-col>
						</u-row>
					</view>
					<view class="tail">
						<view class="left">
							<u--text :text="item.createTime" />
						</view>
						<view class="edit-box right">
							<u-button type="success" size="small" text="兑换" @click="onExchange(item)" />
						</view>
					</view>
				</view>
			</template>
			<template slot="swiper-item-1">
				<u-empty mode="data" icon="/static/data.png" v-if="exchangeList.length==0" />
				<view class="card-list" v-for="(item, index) in exchangeList" :key="index">
					<view class="main">
						<u-row customStyle="position: relative;">
							<u-col span="3">
								<u--image :showLoading="true" :src="item.images" shape="circle" width="80px"
									height="80px" @click="onPopupImages(item.images)" />
							</u-col>
							<u-col span="7">
								<view>
									<view class="main-title">
										<u--text :text="item.rewrdContent" />
									</view>
									<view class="main-integral">
										<u--text type="info" :text="item.integral" prefixIcon="integral-fill"
											iconStyle="color:#ffaaff;margin-right: 3px;" />
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<u--text :text="`× ${item.convertibleTimes}次`" type="info" align="center" />
							</u-col>
						</u-row>
					</view>
					<view class="tail">
						<view class="left">
							<u--text :text="item.exchangeTime" />
						</view>
						<view class="edit-box right">
							<u-tag v-if="item.state==0" type="success" plain text="待使用" />
							<u-tag v-else type="warning" plain text="已使用" />
						</view>
					</view>
				</view>
			</template>
		</pull-down-page>

		<u-popup :show="showImages" @close="showImages=false" mode="center" bgColor="transparent" overlayOpacity="0.8">
			<u--image :showLoading="true" width="100vw" height="100vh" mode="aspectFit" :src="popupImages"
				@click="showImages=false" />
		</u-popup>
	</view>
</template>

<script>
	import pullDownPage from '@/components/myCustom/pull-down-page'

	export default {
		components: {
			pullDownPage
		},
		data() {
			return {
				list: [],
				exchangeList: [],
				subsectionList: ['兑换奖励', '已兑换奖励'],
				swiperIndex: 0,
				showImages: false,
				popupImages: '',
				currentPage: [1, 1], //当前页数
				pageSize: 10, //每页数据条数
				totalData: [1, 1], //数据总数
				tmpInsert: [0, 0], //零时插入的数据条数
				isRefresh: false
			}
		},
		onLoad() {
			this.onRewardList(this.swiperIndex);
		},
		methods: {
			pullDownRefresh(swiperIndex) {
				this.isRefresh = true
				this.currentPage[swiperIndex] = 1
				this.totalData[swiperIndex] += 100
				this.onRewardList(swiperIndex)
			},
			onSectionChange(swiperIndex) {
				this.swiperIndex = swiperIndex
				this.onRewardList(swiperIndex)
			},
			onRewardList(swiperIndex) {
				const total = this.totalData[swiperIndex],
					currentPage = this.currentPage[swiperIndex],
					user = this.vuex_user

				if (this.swiperIndex == 0 && total > this.list.length) {
					this.$http.get("/reward/page", {
						redeemerId: user.id,
						page: currentPage,
						size: this.pageSize
					}).then((res) => {
						let data = res.data
						if (this.isRefresh) {
							this.isRefresh = false
							this.list = data.records
						} else {
							this.list.push(...data.records)
						}
						this.currentPage[swiperIndex] += 1
						this.totalData[swiperIndex] = data.total
						this.$refs.pullDownPage.stopRefresh();
					}).catch((err) => {
						this.$refs.pullDownPage.stopRefresh();
					});
				} else if (this.swiperIndex == 1 && total > this.exchangeList.length) {
					this.$http.get("/exchangeReward/page", {
						userId: user.id,
						page: currentPage,
						size: this.pageSize
					}).then((res) => {
						let data = res.data
						if (this.isRefresh) {
							this.isRefresh = false
							this.exchangeList = data.records
						} else {
							this.exchangeList.push(...data.records)
						}
						this.currentPage[swiperIndex] += 1
						this.totalData[swiperIndex] = data.total
						this.$refs.pullDownPage.stopRefresh();
					}).catch((err) => {
						this.$refs.pullDownPage.stopRefresh();
					});
				}

			},
			onExchange(item) {
				uni.showLoading({
					title: '操作中',
					mask: true
				});
				const user = this.vuex_user
				this.$http.post("/exchangeReward/exchange", {
					userId: user.id,
					rewardId: item.id
				}).then((res) => {
					if (item.convertibleTimes <= 1) {
						const index = this.list.findIndex(e => e.id === item.id)
						this.list.slice(index, 1)
					}
					this.vuex_user.integral -= item.integral
					uni.hideLoading();
					uni.$u.toast('兑换成功')
				}).catch((err) => {
					uni.hideLoading();
					uni.$u.toast(err.message)
				});

			}
		}
	}
</script>

<style>
	.page-main {
		padding: 0;
	}

	.card-list {
		margin: 30rpx;
		padding: 20rpx;
		background-color: antiquewhite;
		border-radius: 15px;
		box-shadow: 1px 2px 5px #c8c8c8;
	}

	.main {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.tail {
		height: 40px;
		line-height: 40px;
	}

	.main-title {
		position: absolute;
		width: 340rpx;
		top: 0;
	}

	.main-integral {
		position: absolute;
		margin-top: 10px;
		bottom: 0;
	}

	.edit-box {
		width: 61px;
		margin-top: 5px;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}
</style>